<!--入口框架-->
<template>
    <div class="mainTem">
        <!-- main左侧 -->
        <div class="mt_left" :class="{ showMenuList: isShowMenuList }">
            <!-- 二级菜单 -->
            <div class="mt_towMenu" v-if="isShowMenuList">
                <div class="mttm_title" @click="showHome">RuoYi</div>
                <div class="userInfo">
                    <div class="imgBox">
                        <img src="" />
                    </div>
                    <div class="infoWrap">
                        <div class="userName">admin</div>
                        <div class="userStatus">
                            <div class="statusItem">
                                <span class="icon1"></span>
                                <span>在线</span>
                            </div>
                            <div class="statusItem logout">
                                <span></span>
                                <span>注销</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar">
                    <el-scrollbar ref="menuSrocll" style="height: 100%; width: 100%">
                        <div class="navMenu" v-for="item in systemMenu" :key="item.code">
                            <div class="navMenu_one" :class="{ showChild: item.showChild }">
                                <div class="nav_oneTitle" @click="handleChildShow(item)" :class="{ selected: selectedHref === item.href }">
                                    <div class="oneLeft">
                                        <cmd-icon :type="item.icon" size="16" color="#a7b1c2"></cmd-icon>
                                        <label>{{ item.name }}</label>
                                    </div>
                                    <div :class="{ selected: item.children.findIndex((e) => e.href === selectedHref) > -1 }" v-if="!$app.isNull(item.children)">
                                        <i class="iconLeft el-icon-arrow-left" :class="{ show: item.showChild }"></i>
                                    </div>
                                </div>
                                <div class="navMenu_tow" v-if="item.showChild">
                                    <div class="nav_towName" :class="{ selected: data.href === selectedHref, showChild: data.showChild }" v-for="data in item.children" :key="data.code" @click="onChildClick(item, data)">
                                        <div class="twoLeft">
                                            <span>{{ data.name }}</span>
                                            <div :class="{ selected: item.children.findIndex((e) => e.href === selectedHref) > -1 }" v-if="!$app.isNull(data.children)">
                                                <i class="iconLeft el-icon-arrow-left" :class="{ show: data.showChild }"></i>
                                            </div>
                                        </div>
                                        <div class="navThree" v-if="data.showChild" @click.stop="">
                                            <div class="navThreeItem" v-for="(k, kpos) in data.children" :key="kpos">
                                                <span>{{ k.name }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="iconMenu" v-else>
                <div class="userIcon">
                    <div class="imgBox">
                        <img src="" />
                    </div>
                </div>
                <el-scrollbar ref="iconMenuSrocll" style="height: 100%; width: 100%">
                    <div class="navIconMenu" :class="{ selected: (item.children || []).findIndex(e => e.href === selectedHref) > -1 || item.href === selectedHref }" v-for="item in systemMenu" :key="item.code" @click="handleChildShow(item)">
                        <el-popover popper-class="popSubMenu" placement="right-start" width="140" trigger="hover" :visible-arrow="false" :disabled="!item.children">
                            <div class="iconBox" :class="{ show: !isShowMenuList }" slot="reference">
                                <cmd-icon :type="item.icon" size="16" color="#a7b1c2"></cmd-icon>
                            </div>
                            <div class="iconSub">
                                <div class="menuName">{{ item.name }}</div>
                                <div class="menuItem" :class="{ selected: data.href === selectedHref }" v-for="(data, pos) in item.children" :key="pos" @click="onChildClick(item, data)">{{ data.name }}</div>
                            </div>
                        </el-popover>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <div class="mt_right" :class="{ showMenuList: isShowMenuList }">
            <div class="mt_right_top">
                <div class="mt_right_top_left" @click="isShowMenuList = !isShowMenuList">
                    <i class="el-icon-s-operation"></i>
                </div>
                <div class="mt_right_top_right">
                    <el-tooltip content="锁定屏幕" class="toopltipItem" effect="dark" placement="bottom">
                        <div class="btnFn">
                            <i class="el-icon-lock"></i>
                            <span>锁屏</span>
                        </div>
                    </el-tooltip>
                    <el-tooltip content="全屏显示" class="toopltipItem" effect="dark" placement="bottom">
                        <div class="btnFn">
                            <i class="el-icon-lock"></i>
                            <span>全屏</span>
                        </div>
                    </el-tooltip>
                    <el-popover popper-class="popSubUser" placement="bottom" width="150" trigger="hover" :visible-arrow="false">
                        <div slot="reference" class="btnFn userInfo">
                            <div class="imgBox">
                                <img src="" />
                            </div>
                            <div>若依</div>
                        </div>
                        <div class="userFnList">
                            <div class="userFnItem">
                                <cmd-icon type="icon-home" size="16" color="#676a6c"></cmd-icon>
                                <span>个人中心</span>
                            </div>
                            <div class="userFnItem">
                                <cmd-icon type="icon-home" size="16" color="#676a6c"></cmd-icon>
                                <span>修改密码</span>
                            </div>
                            <div class="userFnItem">
                                <cmd-icon type="icon-home" size="16" color="#676a6c"></cmd-icon>
                                <span>切换主题</span>
                            </div>
                            <div class="userFnItem">
                                <cmd-icon type="icon-home" size="16" color="#676a6c"></cmd-icon>
                                <span>横向菜单</span>
                            </div>
                            <div class="userFnItem">
                                <cmd-icon type="icon-home" size="16" color="#676a6c"></cmd-icon>
                                <span>退出登录</span>
                            </div>
                        </div>
                    </el-popover>
                </div>
            </div>
            <!-- main主要内容 -->
            <keep-alive v-if="isHome">
                <router-view />
            </keep-alive>
            <multi-page :breadcrumb="multiPageList" v-show="!isHome" pageWidth="calc(100% - 150px)" @closePage="closePage">
                <!-- keep-alive 对应页面的name和router的name需要一致 -->
                <keep-alive :include="multiPageList.map(e => e.pageCode)">
                    <router-view />
                </keep-alive>
            </multi-page>
            <div class="mt_right_bottom">
                <span>© 2025 RuoYi Copyright </span>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scope>
@import './main.scss';
</style>
<style lang="scss">
@import '@/assets/style/style.scss';
@import '@/assets/style/element-ui.scss';
</style>
<script src="./main.js"></script>
